import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  Form, Input,  Button, Card,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import router from 'umi/router';
import { generateAuthPassword } from '../../utils/request';

const FormItem = Form.Item;

@connect(state => ({
  submitting: state.user.loading.model_submit,
}))
@Form.create()
export default class BasicForms extends PureComponent {

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.dispatch({
          type: 'user/submitModifyPswForm',
          payload:{
            password:generateAuthPassword(values.password),
            newPassword:generateAuthPassword(values.newPassword),
          },
        });
      }
    });
  }

  handleReset = () => {
    this.props.form.resetFields();
  }

  handleTabChange = (key) => {
    const { dispatch } = this.props;
    switch (key) {
      case 'setting':
        router.push('/personal/setting');
        break;
      case 'modifypsw':
        router.push('/personal/modifypsw');
        break;
      default:
        break;
    }
  }

  handleConfirmPassword = (rule, value, callback) => {
    const { getFieldValue } = this.props.form
    if (value && value !== getFieldValue('newPassword')) {
      callback('两次密码输入不一致！')
    }

    // Note: 必须总是返回一个 callback，否则 validateFieldsAndScroll 无法响应
    callback()
  }

  render() {
    const { submitting } = this.props;
    const { getFieldDecorator, getFieldValue } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    const tabDefaultKeys= "modifypsw";

    const tabList = [
      {
        key: 'setting',
        tab: '基本设置',
      },
      {
        key: 'modifypsw',
        tab: '修改密码',
        default:true
      },
    ];

    return (
      <PageHeaderLayout
        title="修改密码"
        tabList={tabList}
        tabActiveKey={tabDefaultKeys}
        onTabChange={this.handleTabChange}
      >

          <Card
            bordered={false}
            bodyStyle={{padding:'50px 25%'}}
          >
          <Form
            onSubmit={this.handleSubmit}
            hideRequiredMark
            style={{ marginTop: 8 }}
          >
            <FormItem
              {...formItemLayout}
              label="旧密码"
            >
              {getFieldDecorator('password', {
                rules: [{
                  required: true,
                  min: 8,
                  max: 16,
                  pattern: /^(?![^a-zA-Z]+$)(?!\D+$).{8,15}$/,
                  message: '请输入旧密码',
                }],
              })(
                <Input placeholder="请输入旧密码"  type="password"  />
              )}
            </FormItem>

            <FormItem
              {...formItemLayout}
              label="新密码"
            >
              {getFieldDecorator('newPassword', {
                rules: [{
                  required: true,
                  min: 8,
                  max: 16,
                  pattern: /^(?![^a-zA-Z]+$)(?!\D+$).{8,15}$/,
                  message: '请输入 8-16位，必须包含数字和字母 的新密码',
                }],
              })(
                <Input placeholder="8-16位，必须包含数字和字母"  type="password" />
              )}
            </FormItem>

            <FormItem
              {...formItemLayout}
              label="确认新密码"
            >
              {getFieldDecorator('newPasswordConfirm', {
                rules: [{
                  required: true,
                  min: 8,
                  max: 16,
                  pattern: /^(?![^a-zA-Z]+$)(?!\D+$).{8,15}$/,
                  message: '请输入确认密码',
                }, {
                  validator: this.handleConfirmPassword
                }],
              })(
                <Input placeholder="请输入确认密码"  type="password" />
              )}
            </FormItem>

            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
              <Button style={{ marginRight: 8 }}  onClick={this.handleReset}>重置</Button>
              <Button type="primary" htmlType="submit" loading={submitting}>
                保存修改
              </Button>
            </FormItem>
          </Form>
        </Card>

      </PageHeaderLayout>
    );
  }
}
